import React, { useEffect, useState } from 'react';
import { Table } from 'antd';
import { useKey } from '@/hooks';
import { connect } from 'umi';
import { getTourist } from '@/api/login';
function index(props: any) {
  const [arr, setarr] = useState([]);
  useEffect(() => {
    getTourist().then(({ data }) => {
     // props.dispatch({ type: 'index/INIT', payload: data.data });
        // console.log('====================================');
        // console.log(data);
        // console.log('====================================');
      useKey(data.data);
      setarr(data.data);
    });
  }, []);

  const columns: any = [
    {
      title: 'ID',
      dataIndex: 'vid',
      key: '1',
      render: (text: any) => <a>{text}</a>,
    },
    {
      title: '游客id',
      dataIndex: 'visitor_id',
      key: 'visitor_id',
    },
    {
      title: '游客名称',
      dataIndex: 'visitor_name',
      key: 'visitor_name',
    },
    {
      //http://fangadmin.shbwyz.com/static/common/images/visitor.jpg
      title: '游客头像',
      dataIndex: 'visitor_avatar',
      key: 'visitor_avatar',
      render: (item: any) => {
        return (
          <img
            style={{ width: 50, height: 50 }}
            src={`http://fangadmin.shbwyz.com` + item}
            alt=""
          />
        );
      },
    },

    {
      title: '在线状态',
      dataIndex: 'online_status',
      key: 'online_status',
      render: (item: any) => {
        return (
          <span>
            {item === 1 ? (
              <span style={{ color: '#0abb87' }}>上线</span>
            ) : (
              <span style={{ color: 'red' }}>离线</span>
            )}
          </span>
        );
      },
    },
    {
      title: 'IP',
      dataIndex: 'visitor_ip',
      key: 'visitor_ip',
    },
    {
      title: '创建时间',
      dataIndex: 'create_time',
      key: 'create_time',
    },
  ];

  return (
    <div>
      visitor游客
      <Table
        columns={columns}
        align={'center'}
        pagination={{
          pageSize: 5,
          pageSizeOptions: [1, 2, 3, 4, 5],
          // total: 0,
        }}
        dataSource={arr}
      />
    </div>
  );
}
const mapStateToProps = () => {
  // console.log(index.getTourist);
};
export default connect(mapStateToProps)(index);
